<template>
  <div class="D_content">
    <div class="title"><span class="title_left">D1</span><span class="title_right">团队</span></div>
    <div class="bottom">
      <div class="title">团队成员</div>
      <div class="conList">
        <div class="bottom_con" v-for="(user,index) in userList" :key="index">
          <i class="el-icon-close closeUser" @click="delUser(user.id)"></i>
          <div class="bc_top">
            <div class="bct_1">
              <div class="bct_left">
                <div class="imgs">
                  <img v-if="user.imageUrl!=='' && user.imageUrl != null && user.imageUrl != undefined" :src="user.imageUrl">
                  <div class="img_name" v-if="user.imageUrl == '' || user.imageUrl == null && user.imageUrl == undefined">{{user.firstName.substring(user.firstName.length - 1,user.firstName.length)}}</div>
                </div>
                <div class="user_name" v-if="user.firstName != undefined">{{user.firstName}}</div>
                <span v-if="user.leader != undefined" v-show='user.leader' class="user_job">leader</span>
                <span v-if="user.isLeader != undefined && user.isLeader==1" class="user_job">leader</span>
              </div>
              <div class="bct_right">
                <span class="user_phone" v-if="user.phone !=null">{{user.phone}}</span>
                <span class="user_phone" v-if="user.phonenum!=undefined">{{user.phonenum}}</span>
              </div>
            </div>
            <div class="bct_2">
              <div class="user_firm" v-if="user.deparment!=undefined">
                {{user.deparment}}<span>{{user.job}}</span>
              </div>
              <div class="user_firm" v-if="user.position!=undefined">
                <span>{{user.position}}</span>
              </div>
            </div>
          </div>
          <div class="bc_bottom bcb1" v-if="user.isLeader == undefined">
            <span class="leader" v-if="user.leader == true" @click="setLeader(user)">取消leader</span>
            <span class="leader" v-if="user.leader == false" @click="setLeader(user)">设为leader</span>
          </div>
          <div class="bc_bottom bcb2" v-else>
            <span class="leader" v-if="user.isLeader == 1" @click="setLeader(user)">取消leader</span>
            <span class="leader" v-if="user.isLeader == 0" @click="setLeader(user)">设为leader</span>
          </div>
        </div>
        <div @click="addMember" class="addMe">
          <i class="el-icon-plus"></i>
          <span>添加成员</span>
        </div>
      </div>
    </div>
    <div v-if="detail != null && detail != ''">
      <div class="button" v-if="detail.signatureList == null">
        <el-button type="primary" @click="submit" style="height: 40px">确认</el-button>
        <el-button @click="showJointyl" style="height: 40px">会签</el-button>
        <el-button @click="showJointyl2" style="height: 40px">报审</el-button>
      </div>
      <div  v-if="detail.signatureList != null && detail.data.members !== null">
        <div class="button" v-for="(s,ind) in detail.signatureList" v-if="userName == s.signer && s.status==0" :key="ind">
          <el-button @click="disagree" style="height: 40px">不同意</el-button>
          <el-button @click="Auditing" style="height: 40px">同意</el-button>
        </div>
        <div class="button" v-if="userName == detail.creator">
          <el-button @click="signResult" style="height: 40px">会签结果({{detail.signatureList.length}})</el-button><span v-html="signResultText(detail.signatureList)"></span>
        </div>
      </div>
    </div>
    <div v-else>
      <el-button type="primary" @click="submit" style="height: 40px">确认</el-button>
      <el-button @click="showJointyl" style="height: 40px">会签</el-button>
      <el-button @click="showJointyl2" style="height: 40px">报审</el-button>
    </div>
    <addMember v-if="showAddMember" :userList="userList" @addMember="addMember"></addMember>
    <jointlySign v-if="showJointly" :joinType="joinType" :joinId="joinId" :joinPar="joinPar" :joinEdReportId="joinEdReportId" :joinResult="joinResult"></jointlySign>
  </div>
</template>

<script>
  import addMember from '../../../dialog/addMember'
  import jointlySign from '../../../dialog/jointlySign'
  import {mapGetters,mapActions} from 'vuex'
  export default {
    name: "D_zero",
    data() {
      return {
        userName: '',
        userList:[],
        detail:'',
        userName: localStorage.getItem("userName"),
        params:'',
        joinType: 1, //1：会签，2：报审
        joinId: 0, //会签id
        joinEdReportId: 0, //会签id
        joinPar: {}, //会签参数
        joinResult: [], //会签结果
      }
    },
    components:{
      addMember,
      jointlySign
    },
    computed:{
      ...mapGetters([
        'publicHaveNode',
        'showAddMember',
        'publicNowNode',
        'showJointly'
      ])
    },
    created() {
    },
    mounted() {
      let self = this
      self.searchDetailEightD(self.$route.query.id)
      self.userName = localStorage.getItem('userName')
    },
    methods: {
      ...mapActions([
        'upstate'
      ]),
      //查询8D详情
      searchDetailEightD(id){
        let self = this
        if (id != undefined && id != '' && id != 0){
          self.$http.get(self.conURL + 'mongo/api/docs/' + id).then(res => {
            if (res.data.data.members != undefined){
              this.userList = [];
              this.userList = res.data.data.members;
              this.detail = res.data;
            }else {
              this.getAllUser();
              this.reports = true;
            }
          })
        }else{
          this.getAllUser();
          this.reports = true;
        }
      },
      //获取所有用户
      getAllUser(){
        let self = this
        self.$http.get(self.conURL + 'api/users').then(res => {
          for (let i = 0;i < res.data.length;i++){
            let user={};
            user["firstName"] = res.data[i].firstName;
            user["lastName"] = res.data[i].lastName;
            user["email"] = res.data[i].email;
            user["phone"] = res.data[i].phone;
            user["deparment"] = res.data[i].deparment;
            user["job"] = res.data[i].job;
            user["imageUrl"] = res.data[i].imageUrl;
            user["login"] = res.data[i].login;
            user["id"] = res.data[i].id;
            user["leader"] = false;
            user["msg"] = "设为leader";
            self.userList.push(user);
          }
        })
      },
      //增加成员
      addMember(item){
        let self = this
        self.upstate({key:'showAddMember',val:!self.showAddMember})
        if (item != undefined && item.length > 0){
          self.userList=item
        }
        if (self.detail != undefined && self.detail != null && self.detail != ''){
          self.detail.signatureList = null
        }
      },
      //设置leader
      setLeader(item){
        let self = this
        //重置所有leader，只能选取一个
        if (item.isLeader == undefined){
          if (!item.leader){
            for (let i = 0; i < self.userList.length;i++){
              self.userList[i].leader = false
            }
            item.leader = true
          } else {
            for (let i = 0; i < self.userList.length;i++){
              self.userList[i].leader = false
            }
          }
        } else {
          if (item.isLeader == 0){
            for (let i = 0; i < self.userList.length;i++){
              self.userList[i].isLeader = 0
            }
            item.isLeader = 1
          } else {
            for (let i = 0; i < self.userList.length;i++){
              self.userList[i].isLeader = 0
            }
          }
        }
        if (self.detail != undefined && self.detail != null && self.detail != ''){
          self.detail.signatureList = null
        }
      },
      //删除leader
      delUser(id){
        for (var i=0;i<this.userList.length;i++){
          if (this.userList[i].id==id){
            this.userList.splice(i, 1);
          }
        }
        if (self.detail != undefined && self.detail != null && self.detail != ''){
          self.detail.signatureList = null
        }
      },
      //获取参数
      checkedParams(){
        let self = this
        var edReportIds='';
        let leaderNumber=0;
        if (self.$route.query.edReportId != undefined && self.$route.query.edReportId != "undefined" && self.$route.query.edReportId != 0){
          edReportIds = self.$route.query.edReportId;
        }else if(self.detail.id !== undefined && self.detail.id !== ''&& self.detail.id != 0){
          edReportIds = self.detail.id
        }else {
          edReportIds='';
        }
        let memberList=[];
        for (var j=0;j<this.userList.length;j++){
          let member={};
          member["login"]=this.userList[j].login;
          member["firstName"]=this.userList[j].firstName;
          if (this.userList[j].phone!==undefined){
            member["phonenum"]=this.userList[j].phone;
          }else{
            member["phonenum"]=this.userList[j].phonenum;
          }
          if(this.userList[j].job!=undefined){
            member["position"]=this.userList[j].job;
            member["department"]=this.userList[j].department;
          }else{
            member["position"]=this.userList[j].position;
          }
          member["imageUrl"]=this.userList[j].imageUrl;
          if (this.userList[j].leader!=undefined){
            if (this.userList[j].leader==true){
              member["isLeader"]=1;
              leaderNumber++;
            }else{
              member["isLeader"]=0;
            }
          }else{
            member["isLeader"]=this.userList[j].isLeader;
            if(this.userList[j].isLeader==1){
              leaderNumber++;
            }
          }
          memberList.push(member);
        }
        if (leaderNumber<1){
          alert("请设置一位leader");
          return false;
        }
        this.params={
          data:{
            members:memberList,
          },
          type:'D1',
          creator: localStorage.getItem("userName")
        }
        this.bool=true;
        if (edReportIds!=''){
          this.params["edReportId"]=edReportIds;
        }
      },
      //确认
      submit(){
        let self = this
        self.upstate({key: 'public_backShow',val: true})
        self.checkedParams()
        if (self.$route.query.id == undefined || self.$route.query.id == null || self.$route.query.id == ''){
          self.$http.post(self.conURL + 'mongo/api/eddocs',self.params).then(res => {
            this.$notify({
              title: '成功',
              message: '8D文件创建成功',
              type: 'success'
            });
            if (res.data.status == 'close'){
              self.$route.matched[1].instances.default.$data.pro.edReport.reportId.push(res.data.id)
              self.upstate({key:'publicNowNode',val:2})
              self.upstate({key:'publicHaveNode',val: self.publicHaveNode + 1})
              this.$router.push({
                path: '/index/public_eightD/D_two',
                query: {edReportId:res.data.edReportId}
              })
            }
            self.upstate({key: 'public_backShow',val: false})
          }).catch(error=>{
            console.log(error);
            this.$notify.error({
              title: '错误',
              message: error
            });
            self.upstate({key: 'public_backShow',val: false})
          })
        }else {
          self.params["id"] = self.$route.query.id
          self.$http.post(self.conURL + 'mongo/api/eddocs/update',self.params).then(res => {
            this.$notify({
              title: '成功',
              message: '修改8D文件成功',
              type: 'success'
            });
            if (res.data.status == 'close'){
              if (self.publicHaveNode - 1 == self.publicNowNode){
                self.upstate({key:'publicHaveNode',val: self.publicHaveNode + 1})
              }
              self.upstate({key:'publicNowNode',val:2})
              this.$router.push({
                path: '/index/public_eightD/D_two',
                query: {edReportId:res.data.edReportId}
              })
            }
            self.upstate({key: 'public_backShow',val: false})
          }).catch(error=>{
            console.log(error);
            this.$notify.error({
              title: '错误',
              message: error
            });
            self.upstate({key: 'public_backShow',val: false})
          })
        }
      },
      //显示会签
      showJointyl(){
        let self = this
        self.joinType = 1
        if (self.detail != undefined){
          self.joinId = self.detail.id
        }
        self.joinEdReportId = self.$route.query.edReportId
        self.checkedParams()
        self.joinPar = self.params
        self.upstate({key:'showJointly',val:true})
      },
      //显示审核
      showJointyl2(){
        let self = this
        self.joinType = 2
        if (self.detail != undefined){
          self.joinId = self.detail.id
        }
        self.joinEdReportId = self.$route.query.edReportId
        self.checkedParams()
        self.joinPar = self.params
        self.upstate({key:'showJointly',val:true})
      },
      //不同意
      disagree(){
        let self = this
        self.joinType = 4
        self.joinId = self.detail.id
        self.upstate({key:'showJointly',val:true})
      },
      //同意
      Auditing(){
        let self = this
        self.joinType = 3
        self.joinId = self.detail.id
        self.upstate({key:'showJointly',val:true})
      },
      //会签结果显示文字
      signResultText(list){
        let self = this
        for (let i = 0; i < list.length; i++){
          if (list[i].status == 0){
            return ''
          } else if (list[i].status == -1) {
            return "<i class='el-icon-close' style='font-size: 18px;color: #dc4444;line-height: 42px;margin-left: 10px;margin-right: 5px'></i><span style='font-size: 18px;color: #dc4444;line-height: 42px;'>会签不通过 请修改内容</span>"
          }
        }
        return "<i class='el-icon-check' style='font-size: 18px;color: #4eb240;line-height: 42px;margin-left: 10px;margin-right: 5px'></i><span style='font-size: 18px;color: #4eb240;line-height: 42px;'>会签通过</span>"
      },
      //会签结果
      signResult(){
        let self = this
        self.joinResult = self.detail.signatureList
        self.upstate({key:'showJointly',val:true})
      }
    }
  }
</script>

<style lang="less">
  .D_content{
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 33px 28px;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    border-top: none;
    .title{
      width: 100%;
      line-height: 24px;
      color: #2d7ede;
      .title_left{
        font-size: 24px;
        margin-right: 10px;
      }
      .title_right{
        font-size: 24px;
      }
    }
    .bottom{
      display: flex;
      flex-direction: column;
      width: 100%;
      .title{
        font-size: 18px;
        color: #333333;
        width: 100%;
        height: 62px;
        line-height: 62px;
        text-align: left;
        font-weight: 500;
      }
      .conList{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .bottom_con{
          width: 31.333%;
          position: relative;
          border: 1px solid #eee;
          border-radius: 3px;
          margin: 0 1rem 1.5rem 0rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          box-shadow: #f8f8f9 0px 0px 15px;
          .closeUser{
            position: absolute;
            top: .5rem;
            right: 1rem;
            cursor: pointer;
            color: #fe4747;
          }
          .bc_top{
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            .bct_1,.bct_2{
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              flex-wrap: wrap;
            }
            .bct_1{
              width: 100%;
              height: 54px;
              line-height: 54px;
              .bct_left{
                display: flex;
                flex-direction: row;
                .imgs{
                  width: 54px;
                  height: 54px;
                  border-radius: 50%;
                  overflow: hidden;
                  margin-right: 13px;
                  img{
                    width: 100%;
                    height: 100%;
                  }
                }
                .img_name{
                  width: 54px;
                  height: 54px;
                  border-radius: 50%;
                  text-align: center;
                  line-height: 54px;
                  font-size: 16px;
                  background-color: #2d7ede;
                  color: #fff;
                }
                .user_name{
                  font-size: 20px;
                  color: #222222;
                  margin-right: 10px;
                }
                .user_job{
                  width: 49px;
                  height: 18px;
                  line-height: 18px;
                  text-align: center;
                  color: #fff;
                  font-size: 14px;
                  background: #3384dd;
                  border-radius: 3px;
                  margin-top: auto;
                  margin-bottom: auto;
                }
              }
              .bct_right{
                .user_phone{
                  color: #999999;
                  font-size: 16px;
                }
              }
            }
            .bct_2{
              justify-content: flex-end;
              .user_firm{
                font-size: 14px;
                color: #999999;
              }
            }
          }
          .bc_bottom{
            width: 100%;
            height: 44px;
            line-height: 44px;
            border-top: 1px solid #eeeeee;
            background: #fafafa;
            padding: 0 20px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            .leader{
              cursor: pointer;
              color: #378bf4;
              font-size: 14px;
            }
          }
        }
        .addMe{
          width: 164px;
          height: 156px;
          position: relative;
          border: 1px solid #eee;
          border-radius: 3px;
          margin: 0 1rem 1.5rem 0rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          box-shadow: #f8f8f9 0px 0px 15px;
          cursor: pointer;
          i{
            font-size: 45px;
            font-weight: 600;
            color: #3384dd;
            margin: 0 auto;
          }
          span{
            text-align: center;
            margin-top: 8px;
            font-size: 16px;
            color: #3384dd;
          }
        }
      }
    }
  }
</style>
